/*
 * 制造商管理页面视图
 * @Author: LuoQianJun
 * @Date: 2018-03-31 14:52:07
 * @Last Modified by: ljb
 * @Last Modified time: 2019-06-17 10:31:25
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>

    .v-admin-equipment-views {
        padding: 20px;
    }

</style>
<template>

	<div class="v-admin-equipment-views">

		<Tabs
			v-model="tag_name"
			type="card"
			@on-click="changeTab"
		>
			<!-- @on-click="changeTab -->
			<!-- 新增 -->
			<TabPane
				:label="$t('equipment.equipment')"
				name="新增">
				<manufacturer-create
					ref="create"
					:loading="button_loading"
					:name="name"
					:contact="contact"
					:telphone="telphone"
					:address="address"
					@postStore="postStoreData"
				/>
			</TabPane>

			<!-- 查看 -->
			<TabPane
				:label="$t('equipment.index')"
				name="查看">
				<manufacturer-index
					:manufacturer_index="manufacturer_index"
					:loading="table_loading"
					@edit="manufacturerDetail"
					@delete="deleteBanner"

				/>

				<br>

				<!-- 分页组件 -->
				<Row
					type="flex"
					justify="center">
					<Page
						:total="manufacturer_index_total"
						:current="page_info.page"
						:page-size="page_info.per_page"
						placement="top"
						show-sizer
						show-total
						@on-change="pageChange"
						@on-page-size-change="perPageChange"
					/>
				</Row>
			</TabPane>

		</tabs>

		<Modal
			v-model="show_modal"
			:title="$t('banner.update_banner')"
			class-name="vertical-middle-modal"
			@on-cancel="hide_BannerModal">

			<!-- banner编辑组件 -->
			<manufacturer-edit
				v-if="show_modal"
				ref="edit"

				:manufacturer_solo="manufacturer_solo"
				:loading="button_loading"
				@update="updateBanner"/>

			<div slot="footer"/>

		</Modal>


	</div>

</template>

<script>

import API_LIST from 'src/API_LIST';
import { mapMutations } from 'vuex';
import qs from 'qs';
import { deleteEmptyValue } from 'src/utils/utils';
import manufacturerCreate from './create';
import manufacturerIndex from './index';
import manufacturerEdit from './edit';

export default {

	name: 'EquipmentViews',

	components: {

		manufacturerCreate,
		manufacturerIndex,
		manufacturerEdit,
	},
	data() {
		return {
			table_loading: false, // 表格更新时的loading

			show_modal: false, // 弹框的控制

			tag_name: '新增',

			manufacturer_index: [], // 设备列表index

			button_loading: false, // 按钮的loading

			manufacturer_solo: {},

			manufacturer_index_total: 0, // index列表條數

			name: '', // 厂商

			 contact: '', // 联系人

			 telphone: '', // 电话

			 address: '', // 地址

			page_info: {
				// 分页信息
				page: 1,
				per_page: 20,

			},

			search_info: {

				page: 1,
				per_page: 20,
			},

		};
	},

	methods: {

		...mapMutations('spinShow', [
			'showSpin',
			'closeSpin',
		]),

		/**
         * 删除
         * @param  {Number} id {需要删除的id}
         * @return {undefined}
         */
		deleteBanner(id) {
			this.$Modal.confirm({

				title: this.$t('product.tip'), // '温馨提示',
				content: this.$t('product.is_delete'), // '删除之后将无法恢复，确定吗？',
				onOk: () => {
					const param = {

						_method: 'DELETE',

					};
					this.table_loading = true;

					this.$http.post(`${API_LIST.MANUFACTURER_MANAGEMENT}/${id}`, param)

						.then(({ data }) => {
							if (parseInt(data.code, 10) !== 0) throw new Error(data.error);

							this.fetchDeviceList(this.search_info);

							this.$Message.success(this.$t('common.delete_success'));
						})

						.catch((err) => {
							this.$Message.error(err.message || err.statusText);
						})

						.then(() => { this.table_loading = false; });
				},
				onCancel: () => {},

			});
		},
		/**
         * 切换tab
         * @param  {string} tab_name {tab的name}
         * @return {undefined}
         */
		changeTab(tab_name) {
	       		if (tab_name === '查看') {
				this.fetchDeviceList(this.search_info);

				this.$refs.create.handleReset('formValidate');
			}
		},

		       /** 页码改变
       * @param  {string} page {当前页码}
       * @return {undefined}
       */
		pageChange(page) {
			this.search_info.page = page;
			this.search_info.per_page = this.page_info.per_page;
			this.fetchDeviceList(this.search_info);
		},

		/**
       * 每页显示数改变
       * @param  {string} size {当前每页显示数}
       * @return {undefined}
       */
		perPageChange(size) {
			// this.page_info.page = size;
			this.search_info.per_page = size;
			this.page_info.per_page = size;
			this.fetchDeviceList(this.page_info);
		},

		/**
         * 查看列表详情弹窗
         * @param  {string} detail {详情对象}
         * @return {undefined}
         */
		manufacturerDetail(detail) {
			this.manufacturer_solo = detail;


			this.show_modal = true;
		},

		 	/**
         * 更新列表信息
         * @param  {Object} param {需要更新的参数对象}
		 * @param {Number} id {信息的id}
         * @return {undefined}
         */
		updateBanner(id, param) {
			this.showSpin();

			this.$http.post(`${API_LIST.MANUFACTURER_MANAGEMENT}/${id}`, param)
				.then(({ data }) => {
					if (parseInt(data.code, 10) !== 0) throw new Error(data.error);

					this.$Message.success(this.$t('common.update_success'));

					this.show_modal = false;

					this.fetchDeviceList(this.search_info);
				})
				.catch((err) => {
					this.$Message.error(err.message || err.statusText);
				})
				.then(this.closeSpin);
		},

		/**
		 * Banner列表详情关闭弹窗
		 * @return {undefined}
		 */
		hide_BannerModal() {
			this.manufacturer_solo = null;
		},

		/**
         * 新增
		 * @param  {Object} param {post请求所需的参数对象}
         * @return {undefined}
         */
		postStoreData(param) {
			this.showSpin(this.$t('common.please_wait'));

			this.$http.post(API_LIST.MANUFACTURER_MANAGEMENT, param)

				.then(({ data }) => {
					if (Number(data.code) !== 0) throw new Error(data.error);

					this.$Message.success(this.$t('common.create_success'));

					this.$refs.create.handleReset('formValidate');
				})

				.catch((err) => {
					this.$Message.error(err.message);
					console.log(err);
				})

				.then(this.closeSpin);
		},


		fetchDeviceList(param) {
			this.table_loading = true;

			const query_str = qs.stringify(param);

			this.$http.get(`${API_LIST.MANUFACTURER_MANAGEMENT}?${query_str}`)
				.then(({ data }) => {
					if (parseInt(data.code, 10) !== 0) throw new Error(data.error);
					console.log(data);

					this.manufacturer_index = data.manufactures.data;

					this.manufacturer_index_total = data.manufactures.total;
				})
				.catch((err) => {
					this.$Message.error(err.message || err.statusText);
				})
				.then(() => { this.table_loading = false; });
		},
	},
};
</script>
